<template>
  <div class="page_container">
    <el-form :inline="true" :model="searchForm" ref="searchForm" @keyup.enter.native="search" :size="size">
      <el-form-item label="模糊搜索" prop="keyWord">
        <el-input v-model="searchForm.keyWord" placeholder="请输入手机号、姓名" clearable></el-input>
      </el-form-item>
      <el-button type="primary" icon="el-icon-search" :size="size" @click="search">查询</el-button>
      <el-button @click="resetSearch" icon="el-icon-refresh" :size="size">重置</el-button>
    </el-form>
    <div class="tableBox">
      <el-table :data="dataList" border style="width: 100%;" height="100%">
        <el-table-column type="index" width="50" label="序号"></el-table-column>
        <el-table-column prop="realName" header-align="center" align="center" label="姓名" min-width="100"></el-table-column>
        <el-table-column prop="sex" header-align="center" align="center" label="性别" width="160" show-overflow-tooltip>
          <template slot-scope="{row}">
            {{sexMap[row.sex]}}
          </template>
        </el-table-column>
        <el-table-column prop="phone" header-align="center" align="center" label="手机号" width="160" show-overflow-tooltip></el-table-column>
        <el-table-column prop="idCard" header-align="center" align="center" label="身份证号" width="280" show-overflow-tooltip></el-table-column>
        <!--<el-table-column fixed="right" header-align="center" align="center"
                         width="150" label="操作">
          <template slot-scope="{row}">
            &lt;!&ndash;<el-button type="text" size="small" @click="editAddr(row)">编辑</el-button>&ndash;&gt;
            <el-button type="text" size="small" style="color: #e66613" @click="delAddr(row)">删除</el-button>
          </template>
        </el-table-column>-->
      </el-table>
    </div>
    <pagination v-show="total>0" :total="total" :page.sync="searchForm.pageNum" :limit.sync="searchForm.pageSize" @pagination="getDataList" />

  </div>
</template>

<script>
  import api from '../../../utils/api'
  import Pagination from '@/components/Pagination'
  import { mapGetters } from 'vuex'
  export default {
    name: 'vipList',
    components: {
      Pagination,
    },
    data () {
      return {
        searchForm: {
          keyWord: '',
          pageNum: 1,
          pageSize: 10
        },
        dataList: [],
        total: 0,
        propAddrInfo: {},
        sexMap: {
          1: '男',
          2: '女'
        },
        employeeDialogShow: false
      }
    },
    computed: {
      ...mapGetters(['size', 'zhiXiaShi']),
    },
    mounted () {
      this.getDataList()
    },
    methods: {
      // 获取数据列表
      getDataList () {
        this.$store.commit("app/SET_LOADING_STATE", true)
        api.vipList(this.searchForm).then((res) => {
          if (res) {
            let {data, total} = res.data
            this.dataList = data
            this.total = Number(total)
          }
        }).catch((res) => {
        })
      },

      // 删除地址
      delAddr (row) {
        let id = row.id
        this.delConfirm().then(() => {
          api.delAddress({id}).then(res => {
            this.$message.success('删除成功')
            this.getDataList()
          })
        })
      },
      editAddr (row) {
        Object.assign(this.propAddrInfo, row)
        this.addrDialogShow = true
      },
      addEmployee () {
        this.propAddrInfo = {}
        this.employeeDialogShow = true
      },
      // 重置
      resetSearch () {
        this.$refs['searchForm'].resetFields()
      },
      // 查询
      search () {
        this.searchForm.pageNum = 1
        this.getDataList()
      },
    }
  }
</script>

<style lang="scss">
  .el-icon-star-on {
    cursor: pointer;
    &.isDefault {
      color: #1989fa;
    }
  }
</style>
